<template>
  <template v-for="(component, index) in componentList" :key="component.id">
    <div
      class="menu-list"
      :style="{ marginTop: `${!index ? 20 : 12}px` }"
      @click="$emit('add-component', component)"
    >
      {{ component.props?.text || '测试内容' }}
    </div>
  </template>
</template>

<script lang="ts">
export default { name: 'CustomLabelComponentList' };
</script>
<script setup lang="ts">
import { PropType } from 'vue';
import { LeftLabelComponentType } from '../../../store/storeTypes';
defineProps({
  componentList: {
    type: Array as PropType<LeftLabelComponentType[]>,
    required: true
  }
});

defineEmits(['add-component']);
</script>

<style scoped>
.menu-list {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: background-color 0.32s ease-out;
  cursor: pointer;
}
.menu-list:hover {
  background-color: #eee;
}
</style>
